iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0

CSS的選擇器分為基礎選擇器以及複合選擇器
本日將將繼續說明複合選擇器

複合選擇器可以更準確更高效的選擇元素(標籤)

  • 是由兩個或多個基礎選擇器透過不同方式組合而成
  • 常用的複合選擇器 : 後代選擇器子選擇器併集選擇器偽類選擇器

1. 後代選擇器

又稱為包含選擇器,可以選擇父元素裡面的子元素

元素1 元素2 { 樣式
}
/*上述語法表示選擇1裡面的所有元素2(後代元素)*/

ex:
ul li{ color: red}

/* ul和li中間用空格隔開
ul是父級元素 li是子級元素 最終選擇的是ul裡面的li */

ex:
div ul li{ color: red} (選定div內lu標籤內的li標籤)

/* 也可以三個元素這樣使用,最終也會選定到li
或是 div li { color: red} (這樣的意思也是選定div裡面的li標籤)
*/

備註 :

  • 也可加class 使用.div il li a選擇器

2. 子選擇器

子元素選擇器只會選擇最近一級子元素

元素1 > 元素2{
}
div >p { 樣式
}
/* 選擇div裡面最近一級p元素*/

備註:

  • 元素1和元素2中間用>隔開
  • 元素1是父級 元素2是子級 最終選擇的是元素2
  • 元素2必須是親兒子其他的都不歸此選擇器管

3.并級選擇器

并級選擇器可以選擇多組標籤,同時為他們定義相同的樣式
通常用於集體聲明

并級選擇器用法:
將各選擇器通過,連接而成,任何形式的選擇器皆可使用

元素1,元素2{樣式聲明}
ex:
ul,div{ color: red}
ex:
div,table,ul,li{color:blue}
四個標籤內所有的字體顏色都改為藍色

4.偽類選擇器
偽類選擇器書寫的特點是用冒號:表示比如:hover , :first-child

連接偽類選擇器
a:link 選擇未被訪問的連接
a:visited 選擇已被訪問的連接
a:hover 選擇滑鼠指針位於其上的連接
a:active 選擇活動連接(滑鼠按下未彈起的

/* a 是標籤選擇器 所有的連接 */
a{
color : gray;
}
/* :hover是連接偽類選擇器 鼠標經過*/
a:hover{
color: red;
}

:force 偽類選擇器

用於選取獲得焦點的表單元素
焦點就是光標,一般情況<input>類表單元素才能獲取
所以此選擇器主要針對於表單元素

input:focus{
background-color:yellow;
}

上一篇
Day 05 CSS <基礎選擇器>
下一篇
Day 07 CSS <字體屬性>
系列文
從零開始前端學習(HTML、CSS、JavaScript) 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言